<template>
  <div class="container">
    <div class="left-col">
      <user-profile></user-profile>
      <category-list
        @open="onOpenCategory"
      ></category-list>
    </div>
    <div class="mid-col" >
      <task-list :current_category="current_category" ></task-list>
      <task-timeline :current_category="current_category" ></task-timeline>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import db from '@/modules/common/db.js'
import UserProfile from '@/modules/home/UserProfile'
import CategoryList from '@/modules/home/CategoryList'
import TaskList from '@/modules/home/TaskList'
import TaskTimeline from '@/modules/home/TaskTimeline'

export default {
  name: 'HomePage',
  components: {
    'user-profile': UserProfile,
    'category-list': CategoryList,
    'task-list': TaskList,
    'task-timeline': TaskTimeline
  },
  methods: {
    onOpenCategory: function (c) {
      let td = db.get('todo_list#' + c.id, [])
      for (let i in td) {
        td[i].index = i
        td[i].to_now = moment(td[i].dt_to).fromNow()
      }
      this.todo_list = td
      this.current_category = {
        ...c
      }
    }
  },
  mounted () {
    let ls = db.get('category_list', [])
    this.category_list = ls
    if (this.category_list.length > 0) {
      this.onOpenCategory(this.category_list[0])
    }
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      current_category: {
        title: '',
        id: 0
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  background: #FAFAFA;
}
.left-col {
  width: 300px;
  border-right: 1px solid #EEE;
}
.right-col {
  flex: 1;
  display: none;
  border-left: 1px solid #EEE;
}
.mid-col {
  flex: 1;
  background: #FAFAFA;
}

</style>
